<template>
  <div id="getUser">
    <div class="bigBox">
      <van-field
        v-model="userMsg.tel"
        clearable
        type="tel"
        label="手机号"
        placeholder="请输入您的手机号码"
      />
      <van-field
        v-model="userMsg.sms"
        center
        clearable
        label="短信验证码"
        maxlength="6"
        placeholder="请输入短信验证码"
      >
        <template #button>
          <button class="buttonSms" @click="getSms">{{ getSmsNum }}</button>
        </template>
      </van-field>
      <div v-show="newUserFlag" class="radio">
        <h4>选择油号</h4>
        <div
          v-for="(item, index) in radioList"
          :key="index"
          @click="checkRadio(item.name)"
          :class="userMsg.radio == item.name ? 'trueCheck' : 'radioButton'"
        >
          {{ item.name }}#
        </div>
      </div>
      <button class="newUser" @click="haveNewUser">
        {{ newUserFlag ? "创建用户名" : "登录" }}
      </button>
      <p class="ishaveUser" @click="changeNewUserFlag">
        {{ newUserFlag ? "已有账号，直接登录" : "暂无账号，创建账号" }}
      </p>
    </div>
  </div>
</template>

<script>
import req from "@/utils/index";
import { Toast } from "vant";
export default {
  data() {
    return {
      userMsg: {
        tel: "",
        sms: "",
        radio: "92",
      },
      radioList: [
        {
          id: 1,
          name: "92",
        },
        {
          id: 2,
          name: "95",
        },
        {
          id: 3,
          name: "98",
        },
      ],
      getSmsNum: "获取验证码",
      timer: null,
      newUserFlag: true,
      spid: "",
      userMsgMore: {},
    };
  },
  methods: {
    checkRadio(id) {
      this.userMsg.radio = id;
    },
    // 获取验证码
    getSms() {
      if (this.getSmsNum != "获取验证码") {
        Toast("请60秒后在试");
        return;
      }
      if (!/^1[3|5|7|8][0-9]\d{8}$/.test(this.userMsg.tel)) {
        Toast("手机号码输入不正确");
        return;
      }
      let num = 60;
      this.timer = setInterval(() => {
        if (num == 0) {
          clearInterval(this.timer);
          this.getSmsNum = "获取验证码";
          return;
        }
        num--;
        this.getSmsNum = num + "s后再试";
      }, 1000);
      req(
        "get",
        `/send/sendVerification?channelNo=ZC210507Wy6ktJvF&mobile=${this.userMsg.tel}`,
        {}
      ).then((res) => {
        // console.log(res)
        this.userMsg.sms = res.data || "1234";
      });
    },
    changeNewUserFlag() {
      this.newUserFlag = !this.newUserFlag;
    },
    haveNewUser() {
      if (!/^1[2|3|4|5|6|7|8|9][0-9]\d{8}$/.test(this.userMsg.tel)) {
        Toast("手机号码输入不正确");
        return;
      } else if (this.userMsg.sms.length != 4) {
        Toast("请合理填写验证码");
        return;
      }
      if (this.newUserFlag) {
        req("post", "/qy/user/register", {
          channelNo: window.localStorage.getItem("channelNo"),
          code: this.userMsg.sms,
          oilNo: this.userMsg.radio,
          phoneNumber: this.userMsg.tel,
        }).then((res) => {
          if (res.rspCode == "000000") {
            window.localStorage.setItem("phone", this.userMsg.tel);
            window.localStorage.setItem("logintoken", res.data);
            this.getUserMsg();
            // this.$router.push({name: 'oilShow'})
          }
        });
      } else {
        req("post", "/user/register", {
          channelNo: window.localStorage.getItem("channelNo"),
          code: this.userMsg.sms,
          mobile: this.userMsg.tel,
        }).then((res) => {
          if (res.rspCode == "000000") {
            window.localStorage.setItem("phone", this.userMsg.tel);
            window.localStorage.setItem("logintoken", res.data.token);
            this.getUserMsg();
          }
        });
      }
    },
    getUserMsg() {
      req("get", `/qy/user/info`, {}).then((res) => {
        if (res.rspCode == "000000") {
          window.localStorage.setItem("userMsg", JSON.stringify(res.data));
          this.userMsgMore = res.data;
          if (res.data.userType == 0) {
            this.$store.state.isright = false;
          } else {
            this.$store.state.isright = true;
          }
        } else {
          this.$store.state.isright = false;
        }

        if (this.spid == "sitting") {
          this.$router.push({ name: "userSitting" });
          return;
        }
        if (this.spid == "poster") {
          this.$router.push({ name: "poster" });
          return;
        }
        if (this.spid == "my") {
          this.$router.push({ name: "my" });
          return;
        }
        if (this.spid == "youQuanMsg") {
          this.$router.push({ name: "youQuanMsg" });
          return;
        } else {
          if (
            this.spid == window.localStorage.getItem("geSangQuanGoodsNo") &&
            this.userMsgMore.userType == 0
          ) {
            window.localStorage.setItem("whatBuy", "gsqVip");
            this.$router.push({
              name: "creatOrder",
              query: {
                goodsNo: window.localStorage.getItem('VipGoodsNo'),
                didPay: "noYet",
              },
            });
          }
        }
      });
    },
  },
  created() {
    this.spid = this.$route.query.spid;
  },
};
</script>

<style lang="scss" scoped>
#getUser {
  padding-top: 3rem;
  background-color: #fff;
  .bigBox {
    width: 90%;
    margin: auto;
  }
}
.radio {
  padding: 10px 16px;
  h4 {
    font-size: 0.35rem;
    font-weight: 400;
    padding: 0;
    margin: 0 0 0.2rem 0;
  }
}
.radioButton {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border: 1px solid #ccc;
  background-color: #f6f6f6;
  border-radius: 0.1rem;
  margin-right: 0.5rem;
}
.trueCheck {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border: 1px solid #c31d33;
  color: #c31d33;
  border-radius: 0.1rem;
  font-weight: 700;
  margin-right: 0.5rem;
}
.buttonSms {
  border: none;
}
.newUser {
  display: block;
  width: 90%;
  margin: auto;
  padding: 0.3rem 0;
  border-radius: 0.7rem;
  border: none;
  color: #fff;
  font-size: 0.35rem;
  background: linear-gradient(45deg, #b3142e, #c41e33);
  box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.12);
  margin-top: 1rem;
}
.ishaveUser {
  text-align: center;
  color: royalblue;
}
</style>